<template>
<div style="user-select:none">
    <audio :src="srcs[src]" controls id="myAudio" v-show="false" loop="loop"></audio>
    <div id="my-music-player">
        <div class="music-container">
            <div class="logoo" @dblclick="changeShow" v-show="showW">
                <img :src="logo"/>
            </div>
            <div class="player" v-show="!showW">
                <div class="header">
                    <div class="logo logoo" @dblclick="changeShow" >
                        <img :src="logo" />
                    </div>
                </div>
                <div class="body">
                    <div class="time">
                        {{curTime}}
                    </div>
                    <div class="contro">
                        <div>
                            <img :src="left" @click="toLeft">
                        </div>
                        <div>
                            <img :src="isPlay?stop:bofan" @click="clickPlay">
                        </div>
                        <div>
                            <img :src="right" @click="toRight">
                        </div>
                    </div>
                    <div class="volu">
                        <div class="minn" @click="mivv">
                            <img :src="minn"/>
                        </div>
                        <div class="vv">
                            <div id="inner"></div>
                        </div>
                        <div class="maxx" @click="addvv">
                            <img :src="maxx">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "lin-music",
    props: {
        srcs: {
            type: Array,
            default: () => []
        },
        loop: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            preTime: 0,
            volume: 1,
            src: 0,
            logo: "",
            audio: "",
            bofan: "",
            left: "",
            right: "",
            minn: "",
            maxx: "",
            stop: "",
            isPlay: false,
            curTime: "00:00",
            showW: true,
        }
    },
    mounted() {
        console.log(this.srcs);
        this.stop = require("./static/stop.png").default
        this.minn = require("./static/minn.png").default
        this.maxx = require("./static/maxx.png").default
        this.logo = require("./static/logo.png").default
        this.left = require("./static/left.png").default
        this.right = require("./static/right.png").default
        this.bofan = require("./static/bofan.png").default
        this.src = 0
        this.audio = document.getElementById('myAudio')

        console.log(this.stop);

        setInterval(() => {
            let t = this.audio.currentTime
            t = Math.floor(t)
            let m = Math.floor(t /60)
            m = m.toString(10)
            if(m.length<2)m = '0' + m
            
            let s = t%60
            s = s.toString(10)
            if(s.length<2)s = '0' + s

            this.curTime = m + ":" + s
        }, 1000);
        
        this.initDrag()
        this.initRotate(0)
        this.initRotate(1)
        
    },
    methods: {
        clickPlay() {
            if (this.isPlay) {
                this.isPlay = false
                this.audio.pause()
            } else {
                this.isPlay = true
                this.audio.play()
            }
        },
        mivv() {
            if (this.audio.volume >= 0.2)
                this.audio.volume -= 0.2
            this.volume = this.audio.volume
        },
        addvv() {
            if (this.audio.volume <= 0.8)
                this.audio.volume += 0.2
            this.volume = this.audio.volume
        },
        toLeft() {
            this.audio.pause()
            if(this.src == 0)
                this.src = this.srcs.length-1
            else this.src--
            setTimeout(()=>{
                this.audio.play()
            },100)
            this.isPlay = true  
        },
        toRight() {
            this.audio.pause()
            if(this.src == this.srcs.length-1)
                this.src = 0
            else this.src++
            setTimeout(()=>{
                this.audio.play()
            },100)
            this.isPlay = true
        },
        changeShow() {
            this.showW = !this.showW
        },
        initDrag() {
            let box = document.getElementById('my-music-player')
            var mouseDown = false
            var mouseX,mouseY
            box.style.transform = "translate(-50px,150px)"
            box.onmousedown = function(ev) {
                mouseDown = true
                mouseX = ev.clientX
                mouseY = ev.clientY
            }
            onmouseup = function() {
                mouseDown = false
            }
            
            document.onmousemove = function(ev) {
                if(!mouseDown)return 
                // 获取之前的位置
                let s = box.style.transform
                let t1 = s.indexOf('(',0)
                let t2 = s.indexOf('px',0)
                let posX = parseInt(s.slice(t1+1,t2))
                t1 = s.indexOf(',',0)
                t2 = s.indexOf("px",t2+2)
                let posY = parseInt(s.slice(t1+1,t2))

                box.style.transform = `translate(${ev.clientX-mouseX+posX}px,${ev.clientY-mouseY+posY}px)`
                mouseX = ev.clientX
                mouseY = ev.clientY
            }
        },
        initRotate(id) {
            var box = document.getElementsByClassName('logoo')[id]
            var deg = 0
            var step = 10
            setInterval(()=>{
                deg = (deg + step)%360
                box.style.transform = `rotate(${deg}deg)`
            },100)
        }
    },
    watch: {
        volume() {
            console.log(this.volume)
            let inner = document.getElementById('inner')
            let a = (1-this.volume)*100
            inner.style.width = a.toString(10) + "%"
        }
    }
}
</script>